<template>
<div class="city_map">
  <div class="top" :class="isMobile?'top_m':''"></div>
  <div id="chain_map"></div>
  <div class="footer" :class="isMobile?'footer_m':''"></div>
</div>
</template>
<script>
import {  } from "@/api/api";
import "../../node_modules/echarts/map/js/world";
// import xjMap from './xMap.json'
import { option3 } from "./mapData.js";
var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      name: data[i].name,
      add:data[i].add,
      color:data[i].color,
      value: [data[i].lon,data[i].lat],
    })
  }
  return res;
};
var convertData1 = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      name: data[i][0].name,
      value: [data[i][0].lon,data[i][0].lat],
    })
    res.push({
      name: data[i][1].name,
      value: [data[i][1].lon,data[i][1].lat],
    })
  }
  return res;
};
// var convertData2 = function (data) {
// 	let res = []
// 	for (let i = 0; i <  data.length; i ++) {
// 		let item = data[i]
// 		//  获取 来去 地址的 经纬度
// 		let fromCoord = [item[0].lon, item[0].lat]
// 		let toCoord = [item[1].lon, item[1].lat]
// 		let toCoord1 = [item[2].lon, item[2].lat]
// 		// debugger;
// 		if (fromCoord && toCoord) {
// 			res.push({
// 				fromName: item[0].name,
// 				toName: item[1].name,
// 				toName1: item[2].name,
// 				coords: [fromCoord, toCoord,toCoord1]
// 			})
// 		}
// 	}
// 	return res
// }
var convertData2 = function (data) {
	let res = []
	for (let i = 0; i <  data.length; i ++) {
		let item = data[i]
    //  获取 来去 地址的 经纬度
    let arr=[]
    if(item.length>1&&item[1].name){
      item.forEach(item1=>{
        arr.push([item1.lon, item1.lat])
      })	
      res.push({
        name:'',
        color:item[1].color,
        coords: arr
      })
    }
	}
	return res
}
var myChart = null;

export default {
  data(){
    return{
      isMobile:false,
      center:{color:'#17A2EF',name:'乌鲁木齐',add:'',lat:43.85625,lon:87.531406},
      address:[	
        {color:'#17A2EF',name:'德国',add:' ',lat:51.165691,lon:10.451526},
        {color:'#17A2EF',name:'希腊',add:' ',lat:39.074208,lon:21.824312},
        {color:'#17A2EF',name:'印度',add:' ',lat:20.593684,lon:78.96288	},
        {color:'#17A2EF',name:'伊朗',add:' ',lat:32.427908,lon:53.688046},
        {color:'#17A2EF',name:'意大利',add:' ',lat:41.87194,lon:12.56738},
        {color:'#17A2EF',name:'哈萨克斯坦',add:' ',lat:48.019573,lon:66.923684},
        {color:'#17A2EF',name:'肯尼亚',add:' ',lat:-0.023559,lon:37.906193},
        {color:'#17A2EF',name:'吉尔吉斯斯坦',add:' ',lat:41.20438,lon:74.766098},	
        {color:'#17A2EF',name:'斯里兰卡',add:' ',lat:7.873054,lon:80.771797},		
        {color:'#17A2EF',name:'荷兰',add:' ',lat:52,lon:5},
        {color:'#17A2EF',name:'俄罗斯',add:' ',lat:61.52401,lon:105.318756},
        {color:'#17A2EF',name:'塔吉克斯坦',add:' ',lat:38.861034,lon:71.276093},
        {color:'#17A2EF',name:'土耳其',add:' ',lat:38.963745,lon:35.243322},
        {color:'#17A2EF',name:'乌兹别克斯坦',add:' ',lat:41.377491,lon:64.585262},
        {color:'#17A2EF',name:'越南',add:' ',lat:14.058324,lon:108.277199},
      ],
      list:[]
    }
  },
  created(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      this.isMobile = true//可以换成http地址
    }
    if(this.isMobile){
      option3.geo.zoom=3
    }
    for(let i = 0; i < this.address.length;i++){
      // if('越南俄罗斯' this.address[i].name)
      if(this.address[i].lon>this.center.lon){
        this.list.push([this.center,this.address[i]])
      }else{
        this.list.push([this.address[i],this.center])
      }
    }
  },
  mounted(){
    myChart = this.$echarts.init(document.getElementById('chain_map'))
    window.onresize = myChart.resize
    window.addEventListener("resize", myChart.resize)
    myChart.on("click", (param)=>{
      if (param.data.name == "乌鲁木齐") {
        this.$router.push('index')
      } 
    });

    let arr=JSON.parse(JSON.stringify(this.address))
    // arr.push({...this.center})
    option3.series[0].data=convertData(arr)
    option3.series[1].data=convertData2(this.list)
    option3.series[2].data=convertData2(this.list)
    option3.series[3].data=convertData([this.center])

    option3.series[1].lineStyle.normal.color = function (params) {
      if (params.data.color) {
        return params.data.color
      }else{
        return "#1aa2f1";
      }
    }

    option3.series[2].lineStyle.normal.color = function (params) {
      if (params.data.color) {
        return params.data.color
      }else{
        return "#1aa2f1";
      }
    }
    option3.series[0].itemStyle.normal.color = function (params) {
      if (params.name == '乌鲁木齐') {
        return "#D73C1D";
      }else{
        return params.data.color
      }
    }
    
    myChart.setOption(option3)
  },
  beforeDestroy(){
    if(myChart){
      myChart.clear()
    }
  },
  methods:{
    changeL(item,index){
      this.$router.push('index4')
    }
  }
}
</script>
<style lang="scss" scoped>
.city_map{
  width: 100%;
  height: 100%;
  background: #AFC6EB;
  position: relative;
}
.top{
  position: absolute;
  top: 0;
  height: 200px;
  width: 100%;
  background: url(~@a/img/banner.png) no-repeat;
  background-position:center;
  background-size: 1920px 200px;
  z-index: 100;
}
.footer{
  position: absolute;
  bottom: 0;
  height: 120px;
  width: 100%;
  background: url(~@a/img/footer.png) no-repeat;
  background-position:center;
  background-size: 1920px 120px;
  z-index: 100;
}
.top_m{
  height: 150px;
  background-size: 1200px 150px;
}
.footer_m{
 height: 100px;
 background-size: 1500px 100px;
}
#chain_map{
  width: 100%;
  height: 100%;
}
</style>